import React, { useEffect, useState } from 'react'
import { Table, Button, Modal } from 'antd';
import { Songmanagements, Songlistmanagements, deletesongId } from '../../api/index'
import { useHistory } from 'dva'
export default function ListSong() {
    const [songDetails, setSongDetails] = useState([])
    const [songdel, setSongdel] = useState([])
    const { confirm } = Modal;
    const history = useHistory()
    // 获取地址栏传过来的id
    const hsty = history.location.search.split("=")[1]
    useEffect(() => {
        ObtainingRouteParameters()
    }, [])
    const ObtainingRouteParameters = async () => {
        const arr = await Songmanagements(hsty)
        const data = await Promise.all(arr.map(async item => await Songlistmanagements(item.songId)))
        data.forEach(element => {
            element.key = element.id
        });
        setSongDetails(data)
    }
    const dellist = async (val) => {
        confirm({
            title: '确认永久删除吗',
            // icon: <ExclamationCircleOutlined />,
            content: '删除后不可恢复',
            async onOk() {
                songdel[0] !== undefined ? songdel.forEach(async a => await deletesongId(a, hsty).then(
                    a => {
                        //删除后,刷新列表
                        // console.log("111")
                        ObtainingRouteParameters()
                    }
                )) : await deletesongId(val, hsty).then(b => {

                    ObtainingRouteParameters()
                })


            },
            onCancel() {
                console.log('取消');
            },
        });
    }

    const columns = [
        {
            title: '歌手----歌名',
            // dataIndex: 'age',
            dataIndex: 'name',
            align: 'center',
        },
        {
            title: '操作',
            align: 'center',
            render: (item, text, index) => (
                <Button onClick={() => dellist(text.id)} danger>删除</Button>
            )
        },
    ];
    //批量删除
    const tableSelectionChange = (val) => {
        setSongdel(val)
    }

    return (
        <div>
            <div>
                <Button onClick={() => dellist('success')} danger>批量删除</Button>
                <br />
                <br />
                <br />
            </div>
            <Table
                bordered
                rowSelection={{
                    type: 'checkbox',
                    onChange: tableSelectionChange,
                }}
                columns={columns}
                dataSource={songDetails}
            />
        </div>
    )
}
